/**
 * 状态指令编辑框
 */
import React, { Component } from 'react';
import { Button, message } from 'antd';
import cass from 'classnames';
import { productCommandQuery, updateProductCommand, addProductCommand } from '../../../services/product';
import { isSuccess } from '../../../configs/error';
import css from '../../../themes/index.less';
import CommandEdit from './commandEdit';

const styles = {
	main: {
		display: 'block',
		padding: '0',
		lineHeight: '2'
	},
	title: {
		fontSize: '16px'
	},
	box: {
		border: '1px solid #ccc',
		borderRadius: '4px',
		marginBottom: '1em'
	}
};

const commandType = 'STATUS';
const nameObj = {
	USING: '设备使用中',
	FREE: '设备空闲',
	FINISH: '设备结束使用'
};

class StatusEditBox extends Component {
	state = {
		FREE: null,
		USING: null,
		FINISH: null
	}

	async componentWillMount() {
		const { productId } = this.props;
		if (productId) {
			// 获取当前产品的状态指令
			const res = await productCommandQuery({ commandType, productId });
			if (isSuccess(res)) {
				const data = {};
				res.data.forEach(d => {
					const key = d.statusCommandType;
					try {
						data[key] = JSON.parse(d.command);
						this.idObj[key] = d.id;
					} catch (error) {
						message.error(`解析${nameObj[key]}错误`);
					}
				});
				this.setState(data);
			}
		}
	}

	idObj = {}

	save = async () => {
		const valueObj = {
			FREE: this.free.getValue(),
			USING: this.using.getValue(),
			FINISH: this.finish.getValue()
		};
		for (const k in valueObj) {
			const d = {
				command: JSON.stringify(valueObj[k]),
				commandType,
				name: nameObj[k],
				statusCommandType: k,
				productId: this.props.productId
			};
			let res = null;
			if (this.idObj[k]) {
				// 修改
				d.id = this.idObj[k];
				res = await updateProductCommand(d);
			} else {
				// 新增
				res = await addProductCommand(d);
			}
			if (isSuccess(res)) {
				message.success(`保存“${d.name}”状态指令成功`);
			} else {
				message.error(`保存“${d.name}”状态指令失败！`);
			}
		}
	}

	render() {
		const { USING, FREE, FINISH } = this.state;
		const { show, dataPoint } = this.props;
		styles.main.display = show ? 'block' : 'none';
		return (
			<div style={styles.main}>
				<div className={cass(css.layout, css.lr)}>
					<div>设置状态指令</div>
					<div className={css.right}>
						<Button onClick={this.save} icon="save" className="opt-but">保存</Button>
					</div>
				</div>
				<div>
					<div style={styles.box}>
						<div className="table-thead pad1">
							指令名称：设备使用中
						</div>
						<div className="pad1">
							状态指令数据点：
							<CommandEdit
								dataPoint={dataPoint}
								readWriteType={false}
								value={USING}
								ref={d => d ? this.using = d : null}
								type="status"
							/>
						</div>
					</div>
					<div style={styles.box}>
						<div className="table-thead pad1">
							指令名称：设备空闲
						</div>
						<div className="pad1">
							状态指令数据点：
							<CommandEdit
								dataPoint={dataPoint}
								readWriteType={false}
								value={FREE}
								ref={d => d ? this.free = d : null}
								type="status"
							/>
						</div>
					</div>
					<div style={styles.box}>
						<div className="table-thead pad1">
							指令名称：设备结束使用
						</div>
						<div className="pad1">
							状态指令数据点：
							<CommandEdit
								dataPoint={dataPoint}
								readWriteType={false}
								value={FINISH}
								ref={d => d ? this.finish = d : null}
								type="status"
							/>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default StatusEditBox;
